<template>
    <div class="Box">
        <div class="title">
            <h3>餐位管理</h3>
        </div>
        <div class="blackLine"></div>
        <div id="roomAbilityBox">
            <el-input style="width:230px"
                placeholder="请输入房间名称，例：101"
                v-model="SearchRoom.name">
            </el-input>
            <el-select v-model="SearchRoom.state" placeholder="请选择" style="width:100px">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
            </el-select>
            <el-button icon="el-icon-search" circle @click="getRoom()"></el-button>
            <el-button type="primary" round @click="openAddDialog()">新增</el-button>
        </div>
        <div id="roomTable">
            <el-table 
                    :data="RoomTableData"
                    border
                    style="width:100%;margin-bottom:60px"
                    :row-style="{height:'30px'}" 
                    :cell-style="{padding:'5px'}">
                <el-table-column
                    align="center"
                    prop="id"
                    label="ID"
                    width="220">
                </el-table-column>
                <el-table-column
                    align="center"
                    label="房间号"
                    width="180">
                    <template slot-scope="scope">
                        <el-tag>{{scope.row.name}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    prop="state"
                    label="状态"
                    width="100">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.state === 0? 'success':'danger'">{{scope.row.state == 0? '空闲':'满人'}}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column
                    align="center"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button
                          size="mini"
                          @click="changeState(0,scope.row.id)"
                          >无人用餐</el-button>
                        <el-button
                          size="mini"
                          type="warning"
                          @click="changeState(1,scope.row.id)"
                          >有人用餐</el-button>
                        <el-button
                          size="mini"
                          type="success"
                          @click="getRoomById(scope.row.id)"
                          >更改</el-button>
                        <el-button
                          size="mini"
                          type="danger"
                          @click="deleteRoom(scope.row.id)"
                          >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-dialog
            :show-close="false"
            :close-on-click-modal="false"
            title="新增房间"
            :visible.sync="addDialog"
            width="30%"
            center>
            <el-form>
            <el-form-item label="房间名称">
                <el-input-number v-model="newRoomName" controls-position="right" :min="100" :max="10000"></el-input-number>
            </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAddDialog()">取 消</el-button>
                <el-button type="primary" @click="addRoom()">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
            :show-close="false"
            :close-on-click-modal="false"
            title="更改房间信息"
            :visible.sync="updateDialog"
            width="30%"
            center>
            <el-form>
                <el-form-item label="房间名称">
                    <el-input-number v-model="UpdateRoom.name" controls-position="right" :min="100" :max="10000"></el-input-number>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closeUpdateDialog()">取 消</el-button>
                <el-button type="primary" @click="updateRoomById()">更改</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import router from '@/router';
export default {
    data() {
        return {
            // 搜索条件
            SearchRoom:{
                name:'',
                state:null
            },
            // 表格数据
            RoomTableData: [
                // {
                //     id: '1592900117176299529',
                //     name: '101',
                //     state: 1
                // },
                // {
                //     id: '1592900117176299529',
                //     name: '101',
                //     state: 0
                // },
                // {
                //     id: '1592900117176299529',
                //     name: '101',
                //     state: 1
                // },
                // {
                //     id: '1592900117176299529',
                //     name: '101',
                //     state: 1
                // },
                // {
                //     id: '1592900117176299529',
                //     name: '101',
                //     state: 1
                // },
            ],
            // 选择器数据
            options: [
                {
                    value: 0,
                    label: '空闲'
                }, {
                    value: 1,
                    label: '满员'
                }, {
                    value: null,
                    label: '全部'
                }
            ],
            // 新增的房间号
            newRoomName:100,
            // 是否弹出新增页面
            addDialog: false,
            // 是否弹出更改界面
            updateDialog: false,
            // 更改页面的数据
            UpdateRoom:{
                id:'',
                name:''
            }
        }
    },
    methods: {
        // 根据id更新房间信息
        updateRoomById() {
            this.$axios.put("http://localhost:8888/hwy/cater/room/updateRoomById/"+this.UpdateRoom.id+"/"+this.UpdateRoom.name)
                .then((response)=>{
                    if (response.data.code === 1 ) {
                            this.$message({
                                message: response.data.data,
                                type: 'success',
                            });
                            this.closeUpdateDialog();
                            this.getRoom();
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error',
                            });
                        }
                })
        },
        // 根据id获取房间信息
        getRoomById(id) {
            this.$axios.get("http://localhost:8888/hwy/cater/room/getRoomById/"+id)
                    .then((response) => {
                    //    console.log(response);
                        this.UpdateRoom.name = response.data.data.name;
                        this.UpdateRoom.id = response.data.data.id;
                        this.openUpdateDialog();
                    })
        },
        // 删除Room
        deleteRoom(id) {
            this.$confirm("此操作将永久删除此餐位, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(()=>{
                this.$axios.delete("http://localhost:8888/hwy/cater/room/deleteRoom/"+id)
                        .then((response) => {
                            if (response.data.code === 1 ) {
                                this.$message({
                                    message: response.data.data,
                                    type: 'success',
                                });
                            } else {
                                this.$message({
                                    message: response.data.msg,
                                    type: 'error',
                                });
                            }
                            this.getRoom();
                        })
                    }).catch(()=>{
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            })
        },
        // 添加新房间 --------bug
        addRoom() {
            this.$axios.post("http://localhost:8888/hwy/cater/room/addRoom/"+this.newRoomName)
                    .then((response) => {
                        if (response.data.code === 1 ) {
                            this.$message({
                                message: response.data.data,
                                type: 'success',
                            });
                            this.closeAddDialog();
                            this.getRoom();
                        } else {
                            this.$message({
                                message: response.data.msg,
                                type: 'error',
                            });
                        }
                    })
        },
        // 关闭更新界面
        closeUpdateDialog(){
            this.updateDialog = false;
        },
        // 打开更新界面
        openUpdateDialog(){
            this.updateDialog = true;
        },
        // 打开新增界面
        openAddDialog() {
            this.addDialog = true;
            this.newRoomName = 100;
        },
        // 关闭新增界面
        closeAddDialog() {
            this.addDialog = false;
        },
        // 改变state值
        changeState(state,id) {
            this.$axios.put("http://localhost:8888/hwy/cater/room/updateState/"+state+"/"+id)
                    .then((response) => {
                        this.$message({
                            message: response.data.data,
                            type: 'success',
                        });
                        this.getRoom();
                    })
        },
        // 获取room表格数据
        getRoom() {
            this.$axios.post("http://localhost:8888/hwy/cater/room/getRoom",this.SearchRoom)
                    .then((response) => {
                        // console.log(response)
                        this.RoomTableData = response.data.data;
                    })
        },
    },
    mounted() {
        this.getRoom();
    },
}
</script>

<style>
@import '../../assets/css/room/room.css';
</style>